<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/3/11 0011
  Time: 20:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <%--        搜索表单--%>
    <el-form :inline="true" :model="empVo" class="demo-form-inline">
        <el-form-item label="员工">
            <el-input v-model="empVo.name" placeholder="员工"></el-input>
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="empVo.deptName" placeholder="部门">
                <el-option v-for="d in depts" :label="d.deptName" :value="d.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="danger" round icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    <%--    表单对话框--%>
    <%--
            el-dialog:对话框标签
            visible.sync:控制对话框的显示和隐藏 true显示
            title:标题
    --%>
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="addEmp" :rules="rules" ref="formRef">
            <el-form-item label="用户名" :label-width="60" prop="username">
                <el-input v-model="addEmp.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="60" prop="password">
                <el-input v-model="addEmp.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="60" prop="name">
                <el-input v-model="addEmp.name" autocomplete="off"></el-input>
            </el-form-item >

            <el-form-item label="性别" :label-width="60" prop="name">
            <el-radio v-model="addEmp.gender" label="1" :label-width="60">男：</el-radio>
            <el-radio v-model="addEmp.gender" label="2" :label-width="60">女：</el-radio>
            </el-form-item>

            <el-form-item label="照片" :label-width="60">
                <el-input v-model="addEmp.image" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作" :label-width="60" prop="job">
                <el-input v-model.number="addEmp.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" :label-width="60">
<%--                <el-input v-model="addEmp.entrydate" autocomplete="off"></el-input>--%>
                    <el-date-picker
                            v-model="addEmp.entrydate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
            </el-form-item>






            <el-form-item label="部门ID" :label-width="60" prop="deptId">
                <el-input v-model.number="addEmp.deptId" autocomplete="off"></el-input>
            </el-form-item>
                       <%-- prop="deptName--%>
            <el-form-item label="部门" :label-width="60">
                <el-select v-model="addEmp.deptName" placeholder="请选择部门">
                    <el-option v-for="d in depts" :label="d.deptName" :value="d.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEnter">确 定</el-button>
        </div>
    </el-dialog>

    <%--
   修改学生
   --%>

    <el-dialog title="修改员工" :visible.sync="dialogFormVisible1" width="30%">
        <el-form :model="editorEmp" :rules="rules" ref="formRef">
            <el-form-item label="用户名" :label-width="60" prop="username">
                <el-input v-model="editorEmp.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="60" prop="password">
                <el-input v-model="editorEmp.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="60" prop="name">
                <el-input v-model="editorEmp.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="60" prop="name">
                <el-radio v-model="editorEmp.gender" label="1" :label-width="60">男：</el-radio>
                <el-radio v-model="editorEmp.gender" label="2" :label-width="60">女：</el-radio>
            </el-form-item>
            <el-form-item label="照片" :label-width="60">
                <el-input v-model="editorEmp.image" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作" :label-width="60" prop="job">
                <el-input v-model.number="editorEmp.job" autocomplete="off"></el-input>
            </el-form-item>
            <%--                <el-input v-model="editorEmp.entrydate" autocomplete="off"></el-input>--%>
            <el-form-item label="入职时间" :label-width="60">
                <el-date-picker
                        v-model="editorEmp.entrydate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <%--            <el-form-item label="入职时间" required>--%>
            <%--                <el-col :span="11">--%>
            <%--                    <el-form-item prop="entrydate">--%>
            <%--                        <el-date-picker type="date" placeholder="选择日期" v-model="addEmp.entrydate"--%>
            <%--                                        style="width: 100%;"></el-date-picker>--%>
            <%--                    </el-form-item>--%>

            <el-form-item label="部门ID" :label-width="60" prop="deptId">
                <el-input v-model.number="editorEmp.deptId" autocomplete="off"></el-input>
            </el-form-item>
            <%--            prop="deptName--%>
            <el-form-item label="部门" :label-width="60"  >
                <el-select v-model="editorEmp.deptName" placeholder="请选择部门">
                    <el-option v-for="d in depts" :label="d.deptName" :value="d.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="editorEnter">确 定</el-button>
        </div>
    </el-dialog>

    <%--        表格组件--%>
    <el-table
            :data="emps"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="员工编号"
        >
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名"
        >
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="image"
                label="图片">
        </el-table-column>
        <el-table-column
                prop="job"
                label="职位">
        </el-table-column>
        <el-table-column
                prop="entrydate"
                label="入职时间">
        </el-table-column>
        <el-table-column
                prop="deptId"
                label="部门ID">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="更新时间">
        </el-table-column>
        <el-table-column
                prop="dept.id"
                label="部门编号">
        </el-table-column>
        <el-table-column
                prop="dept.deptName"
                label="部门名称">
        </el-table-column>
        <el-table-column
                prop="dept.createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="dept.updateTime"
                label="更新时间">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="150">
            <template slot-scope="scope">
                <el-button @click="delEmp(scope.row)" type="danger" size="small">删除</el-button>
                <el-button type="primary" size="small" @click="editor(scope.row)">编辑</el-button>

            </template>
        </el-table-column>
    </el-table>
    <%--        分页组件--%>
    <el-pagination
    <%--            页面大小改变触发的事件 --%>
            @size-change="handleSizeChange"
    <%--            页码改变时出发的事件--%>
            @current-change="handleCurrentChange"
    <%--            当前的页码--%>
            :current-page="current"
    <%--            接受一个整型数组，数组元素为展示的选择每页显示个数的选项--%>
            :page-sizes="[2, 4, 6, 8]"
    <%--            默认每页显示的条数--%>
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
    <%--            总记录数--%>
            :total="total">
    </el-pagination>

</div>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            emps: [],
            current: 1,
            total: 0,
            pageSize: 4,
            empVo: {
                name: "",
                deptName: "",
            },
            depts: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            addEmp: {
                username: '',
                password: '',
                name: '',
                gender:'',
                image: '',
                job: '',
                entrydate: '',
                deptId: '',
                deptName: ''
            },
            editorEmp: {
                username: '',
                password: '',
                name: '',
                gender: '',
                image: '',
                job: '',
                entrydate: '',
                deptId: '',
                deptName: ''
            },
            //表单校验规则
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                gender: [
                    {required: true, message: '性别不能为空'},
                    {type: 'number', message: '性别必须为数字值,1=男,2=女'}
                ],
                job: [
                    {required: true, message: '工作不能为空'},
                    {type: 'number', message: '工作必须为数字值,1 班主任，2 讲师，3 学工主管，4 教研主管，5咨询师'}
                ],
                date1: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                deptId: [
                    {required: true, message: '部门id不能为空'},
                    {type: 'number', message: '部门id必须为数字值'}
                ],
                // deptName:[
                //     { required: true, message: '请选择部门', trigger: 'change' }
                // ]
            }


        },
        //页面加载完显示信息
        created() {
            this.loadEmp()
            this.loadDept()
        },
        methods: {
            //确认修改按钮
            editorEnter() {
                //校验通过后执行
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        //后台修改
                        axios.post("emp/updateEmp",this.editorEmp).then(result=>{
                            if (result.data===1){
                                //重置表单
                                this.$refs.formRef.resetFields();
                                //关闭对话框
                                this.dialogFormVisible1 = false
                                //信息
                                this.$message.success("修改成功")
                                //重新加载表单
                                this.loadEmp()
                            }

                        })

                    }
                })


                this.dialogFormVisible1 = false
            },

            //确认添加按钮
            addEnter() {
                console.log(this.addEmp)
                //校验通过后执行
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        //后台添加
                        axios.post("/emp/insertEmp", this.addEmp).then(result => {

                            if (result.data === 1) {
                                //重置表单
                                this.$refs.formRef.resetFields();
                                //关闭对话框
                                this.dialogFormVisible = false
                                //信息
                                this.$message.success("添加成功")
                                //重新加载表单
                                this.loadEmp()
                            }
                        })
                    } else {

                        return false
                    }

                })
            },
            //添加按钮
            add() {
                this.dialogFormVisible = true
            },
            //修改按钮
            editor(row) {
                this.dialogFormVisible1 = true
                this.editorEmp = row
            },

            //删除按钮
            delEmp(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调用后台删除
                    axios.post("emp/deleteEmp/" + row.id).then(result => {
                        console.log(row)
                        //删除成功
                        if (result.data === 1) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            })
                            //重新加载页面
                            this.loadEmp()
                        }

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //搜索按钮
            search() {
                this.loadEmp()
            },

            //加载员工信息
            loadEmp() {
                axios.post("/emp/getAll/" + this.current + "/" + this.pageSize, this.empVo).then(result => {
                    console.log(result)
                    this.emps = result.data.list
                    this.total = result.data.total

                })
            },
            loadDept() {
                axios.post("/getAllDept").then(result => {
                    console.log(result)
                    this.depts = result.data
                })
            },
            handleSizeChange(val) {
                console.log("页面大小:" + val);
                this.pageSize = val
                this.loadEmp()
            },
            handleCurrentChange(val) {
                console.log("当前页:" + val);
                this.current = val
                this.loadEmp()
            }

        }

    })

</script>

</body>
</html>
